<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 基本指定</title>
  <style>
    .btn {
      height: 50px;
      width: 150px;
    }
    .btn1 {
      color: red;
      font-size: 24px;
    }

    [v-cloak] {
      /* 设置为不显示 */
      display: none; 
    }


  </style>
</head>
<body>
  <div id="app">
    <p> {{ msg }} </p>
    <p v-cloak> {{ msg }} </p>
    <p v-text="msg" ></p>
    <div v-html="html_string"></div> 指令
    <!-- v-bind 指令 -->
    <input type="button" value="按钮1" v-bind:class="btn2">
    <input type="button" value="按钮3" :class="btn + ' ' + btn1">
    <!-- v-on 指令 -->
    <button :class="btn2" v-on:click="sayHello">这是一个v-on绑定的按钮</button>
    <button :class="btn2" @click="sayHello">这是一个简化v-on指令绑定的按钮</button>
    <div style="width: 400px;height: 400px;background-color: #f60;" @mouseover="overEvent('vue.js', $event)"></div>
  </div>

  <input type="button" value="按钮2" class="btn">
  <input type="button" value="按钮2" class="btn" onclick="btn()">

</body>
<script src="./src/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      msg: 'hello world',
      html_string: '<p>这是段落</p><h1>这是标题</h1>',
      btn2: 'btn btn1',
      btn: 'btn',
      btn1: 'btn1'
    },
    methods: {
      // ES5的写法
      sayHello: function(){
        alert('这是v-on的绑定按钮');
      },
      // ES6的写法
      // overEvent(event){
      //   console.log("over event is runing!!!");
      //   if (event) {
      //     console.log(event.target.tagName);
      //   }
      // }
      overEvent(msg,event){
        console.log("over event is runing!!!", msg);
        if (event) {
          console.log(event.target.tagName);
        }
      }
    },
  });

  function btn() {
    console.log('btn');
  }
</script>
</html>